---
title: "Translate"
description: "Utilities for translating elements with transform."
---

import plugin from 'tailwindcss/lib/plugins/translate'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'
import { numbersFirstByPrefix } from '@/utils/sortClasses'

export const classes = {
  plugin,
  sort: numbersFirstByPrefix,
}

## Usage

Translate an element by first enabling transforms with the `transform` utility, then specifying the translate direction and distance using the `translate-x-{amount}` and `translate-y-{amount}` utilities.

```html purple
<template preview>
  <div class="flex flex-col justify-around space-y-12 md:flex-row md:space-y-0 md:space-x-12">
    <div class="w-16 h-16 bg-purple-400 bg-stripes bg-stripes-white">
      <img class="h-16 w-16 transform translate-y-6" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80">
    </div>
    <div class="w-16 h-16 bg-purple-400 bg-stripes bg-stripes-white">
      <img class="h-16 w-16 transform -translate-y-6" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80">
    </div>
    <div class="w-16 h-16 bg-purple-400 bg-stripes bg-stripes-white">
      <img class="h-16 w-16 transform translate-y-0" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80">
    </div>
  </div>
</template>

<img class="transform **translate-y-6** ...">
<img class="transform **-translate-y-6** ...">
<img class="transform **translate-y-0** ...">
```

## Responsive

To control the translation of an element at a specific breakpoint, add a `{screen}:` prefix to any existing translate utility. For example, use `md:translate-x-8` to apply the `translate-x-8` utility at only medium screen sizes and above.

```html
<img class="transform translate-x-2 **md:translate-x-8** ...">
```

For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation.

## Customizing

### Translate scale

By default, Tailwind provides fixed value translate utilities that match our [spacing scale](/docs/customizing-spacing), as well as 50% and 100% variations for translating relative to the element's size.

You can customize the global spacing scale in the `theme.spacing` or `theme.extend.spacing` sections of your `tailwind.config.js` file:

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        spacing: {
+         '72': '18rem',
+         '84': '21rem',
+         '96': '24rem',
        }
      }
    }
  }
```

To customize the translate scale separately, use the `theme.translate` section of your `tailwind.config.js` file.

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        translate: {
+         '1/7': '14.2857143%',
+         '2/7': '28.5714286%',
+         '3/7': '42.8571429%',
+         '4/7': '57.1428571%',
+         '5/7': '71.4285714%',
+         '6/7': '85.7142857%',
        }
      }
    }
  }
```

Learn more about customizing the default theme in the [theme customization documentation](/docs/theme#customizing-the-default-theme).

### Variants

<Variants plugin="translate" />

### Disabling

<Disabling plugin="translate" />
